import React, {useCallback, useState, useRef} from 'react';
import { Text, View, StyleSheet, Button, TouchableOpacity } from 'react-native';
import {Popup, LoadingView} from 'react-native-zc-app-component';

interface HomeProps {}

const Home = (props: HomeProps) => {
  const [showLoading, setShowLoading] = useState(false);

  const ShowPopupLoading = () => {
    // Popup.showLoading({text:'TestLoading', cancelable: true, onCancel:() => {Popup.hideLoading()}})
    Popup.showLoading();
    setTimeout(() => {
      Popup.hideLoading();
    }, 2000);
  }

  const ShowComponentLoading = () => {
    setShowLoading(!showLoading);
  }

  const ShowConfirm = () => {
    const hide = Popup.confirm({
      title: '退出烹饪',
      titleStyle: {
        fontSize: 18,
        color: '#3C424D',
        fontWeight: '500',
      },
      message: '确定要退出烹饪吗？',
      buttons: [
        {
          title: '取消',
          color: '#9A9A96',
          onPress: () => {
            
          },
        },
        {
          title: '确认退出',
          color: '#FF3434',
          onPress: () => {
            
          },
        },
      ],
    });
  }

  const ShowTip = () => {
    Popup.tip('这是默认的提示');
  }

  const ShowTipCenter = () => {
    Popup.tipCenter('这是中间的提示');
  }

  const ShowTipSuccess = () => {
    Popup.tipSuccess('这是成功的提示');
  }

  return (
    
    <View style={styles.container}>
      <LoadingView 
        loading={showLoading}
        text='Loading'
        cancelable={true}
        onCancel={() => {
          //cancelRequest
          setShowLoading(false);
        }}
      />
      {/* <Button style={{}} title='Loading' onPress={firstButtonPress} /> */}
      <TouchableOpacity onPress={ShowPopupLoading}>
        <View style={styles.buttonStyle}><Text style={styles.title}>ShowPopupLoading</Text></View>
      </TouchableOpacity>
      <TouchableOpacity onPress={ShowComponentLoading}>
        <View style={styles.buttonStyle}><Text style={styles.title}>ShowComponentLoading</Text></View>
      </TouchableOpacity>
      <TouchableOpacity onPress={ShowConfirm}>
        <View style={styles.buttonStyle}><Text style={styles.title}>ShowConfirm</Text></View>
      </TouchableOpacity>

      <TouchableOpacity onPress={ShowTip}>
        <View style={styles.buttonStyle}><Text style={styles.title}>ShowTip</Text></View>
      </TouchableOpacity>
      <TouchableOpacity onPress={ShowTipCenter}>
        <View style={styles.buttonStyle}><Text style={styles.title}>ShowTipCenter</Text></View>
      </TouchableOpacity>
      <TouchableOpacity onPress={ShowTipSuccess}>
        <View style={styles.buttonStyle}><Text style={styles.title}>ShowTipSuccess</Text></View>
      </TouchableOpacity>
    </View>
    
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonStyle: {
    marginVertical: 8,
    backgroundColor: 'blue',
    borderRadius: 8,
    padding: 16,
  },
  title: {
    fontSize: 16,
    lineHeight: 20,
    color: 'white',
    fontWeight: '600'
  }
});
